<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline label-width="120px">
                <el-form-item label="工单号" prop="工单号">
                    <el-input class="w-[280px]" v-model="queryParams.工单号" clearable placeholder="请输入工单号" />
                </el-form-item>

                <el-form-item label="工单类型" prop="工单类型">
                    <el-input class="w-[280px]" v-model="queryParams.工单类型" clearable placeholder="请输入工单类型" />
                </el-form-item>
                <el-form-item label="分配机构" prop="分配机构">
                    <el-input class="w-[280px]" v-model="queryParams.分配机构" clearable placeholder="请输入分配机构" />
                </el-form-item>
                <el-form-item label="分配人员" prop="分配人员">
                    <el-input class="w-[280px]" v-model="queryParams.分配人员" clearable placeholder="请输入分配人员" />
                </el-form-item>
                <el-form-item label="参与人员" prop="参与人员">
                    <el-input class="w-[280px]" v-model="queryParams.参与人员" clearable placeholder="请输入参与人员" />
                </el-form-item>

                <el-form-item label="产品IMEI旧" prop="产品IMEI旧">
                    <el-input class="w-[280px]" v-model="queryParams.产品IMEI旧" clearable placeholder="请输入产品IMEI旧" />
                </el-form-item>
                <el-form-item label="序列号旧" prop="序列号旧">
                    <el-input class="w-[280px]" v-model="queryParams.序列号旧" clearable placeholder="请输入序列号旧" />
                </el-form-item>
                <el-form-item label="产品品牌" prop="产品品牌">
                    <el-input class="w-[280px]" v-model="queryParams.产品品牌" clearable placeholder="请输入产品品牌" />
                </el-form-item>
                <el-form-item label="产品型号" prop="产品型号">
                    <el-input class="w-[280px]" v-model="queryParams.产品型号" clearable placeholder="请输入产品型号" />
                </el-form-item>
                <el-form-item label="产品颜色" prop="产品颜色">
                    <el-input class="w-[280px]" v-model="queryParams.产品颜色" clearable placeholder="请输入产品颜色" />
                </el-form-item>
                <el-form-item label="产品容量" prop="产品容量">
                    <el-input class="w-[280px]" v-model="queryParams.产品容量" clearable placeholder="请输入产品容量" />
                </el-form-item>
                <el-form-item label="保单号" prop="保单号">
                    <el-input class="w-[280px]" v-model="queryParams.保单号" clearable placeholder="请输入保单号" />
                </el-form-item>

                <el-form-item label="用户名称" prop="用户名称">
                    <el-input class="w-[280px]" v-model="queryParams.用户名称" clearable placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="手机号码" prop="手机号码">
                    <el-input class="w-[280px]" v-model="queryParams.手机号码" clearable placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="产品IMEI新" prop="产品IMEI新">
                    <el-input class="w-[280px]" v-model="queryParams.产品IMEI新" clearable placeholder="请输入产品IMEI新" />
                </el-form-item>
                <el-form-item label="序列号新" prop="序列号新">
                    <el-input class="w-[280px]" v-model="queryParams.序列号新" clearable placeholder="请输入序列号新" />
                </el-form-item>
                <el-form-item label="产品品牌新" prop="产品品牌新">
                    <el-input class="w-[280px]" v-model="queryParams.产品品牌新" clearable placeholder="请输入产品品牌新" />
                </el-form-item>
                <el-form-item label="产品型号新" prop="产品型号新">
                    <el-input class="w-[280px]" v-model="queryParams.产品型号新" clearable placeholder="请输入产品型号新" />
                </el-form-item>
                <el-form-item label="产品颜色新" prop="产品颜色新">
                    <el-input class="w-[280px]" v-model="queryParams.产品颜色新" clearable placeholder="请输入产品颜色新" />
                </el-form-item>
                <el-form-item label="产品容量新" prop="产品容量新">
                    <el-input class="w-[280px]" v-model="queryParams.产品容量新" clearable placeholder="请输入产品容量新" />
                </el-form-item>
                <el-form-item label="旧机回收价格" prop="旧机回收价格">
                    <el-input class="w-[280px]" v-model="queryParams.旧机回收价格" clearable placeholder="请输入旧机回收价格" />
                </el-form-item>

                <el-form-item label="免赔价差" prop="免赔价差">
                    <el-input class="w-[280px]" v-model="queryParams.免赔价差" clearable placeholder="请输入免赔价差" />
                </el-form-item>
                <el-form-item label="理赔额度" prop="理赔额度">
                    <el-input class="w-[280px]" v-model="queryParams.理赔额度" clearable placeholder="请输入理赔额度" />
                </el-form-item>
                <el-form-item label="工单备注" prop="工单备注">
                    <el-input class="w-[280px]" v-model="queryParams.工单备注" clearable placeholder="请输入工单备注" />
                </el-form-item>



                <el-form-item label="收款备注" prop="收款备注">
                    <el-input class="w-[280px]" v-model="queryParams.收款备注" clearable placeholder="请输入收款备注" />
                </el-form-item>
                <el-form-item label="发货类型" prop="发货类型">
                    <el-input class="w-[280px]" v-model="queryParams.发货类型" clearable placeholder="请输入发货类型" />
                </el-form-item>
                <el-form-item label="快递公司" prop="快递公司">
                    <el-input class="w-[280px]" v-model="queryParams.快递公司" clearable placeholder="请输入快递公司" />
                </el-form-item>
                <el-form-item label="快递单号" prop="快递单号">
                    <el-input class="w-[280px]" v-model="queryParams.快递单号" clearable placeholder="请输入快递单号" />
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
            <el-button v-perms="['tb_hxwt/add']" type="primary" @click="handleAdd">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                新增
            </el-button>
            <el-button v-perms="['tb_hxwt/delete']" :disabled="!selectData.length" @click="handleDelete(selectData)">
                删除
            </el-button>
            <div class="mt-4">
                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="工单号" prop="工单号" width="180" />
                    <el-table-column label="状态" prop="状态" width="100" />
                    <el-table-column label="工单类型" prop="工单类型" width="100" />
                    <el-table-column label="分配机构" prop="分配机构" width="100" />
                    <el-table-column label="分配人员" prop="分配人员" width="100" />
                    <el-table-column label="参与人员" prop="参与人员" width="100" />
                    <el-table-column label="业务标识" prop="业务标识" width="100" />
                    <el-table-column label="产品IMEI旧" prop="产品IMEI旧" width="180" />
                    <el-table-column label="序列号旧" prop="序列号旧" width="100" />
                    <el-table-column label="产品品牌" prop="产品品牌" width="100" />
                    <el-table-column label="产品型号" prop="产品型号" width="160" />
                    <el-table-column label="产品颜色" prop="产品颜色" width="100" />
                    <el-table-column label="产品容量" prop="产品容量" width="100" />
                    <el-table-column label="保单号" prop="保单号" width="160" />
                    <el-table-column label="密码" prop="密码" width="100" />
                    <el-table-column label="保修状态" prop="保修状态" width="100" />
                    <el-table-column label="报修服务类型" prop="报修服务类型" width="100" />
                    <el-table-column label="用户名称" prop="用户名称" width="100" />
                    <el-table-column label="手机号码" prop="手机号码" width="120" />
                    <el-table-column label="产品IMEI新" prop="产品IMEI新" width="160" />
                    <el-table-column label="序列号新" prop="序列号新" width="100" />
                    <el-table-column label="产品品牌新" prop="产品品牌新" width="100" />
                    <el-table-column label="产品型号新" prop="产品型号新" width="100" />
                    <el-table-column label="产品颜色新" prop="产品颜色新" width="100" />
                    <el-table-column label="产品容量新" prop="产品容量新" width="100" />
                    <el-table-column label="旧机回收价格" prop="旧机回收价格" width="100" />
                    <el-table-column label="更换时间" prop="更换时间" width="200" />

                    <el-table-column label="工单备注" prop="工单备注" width="100" />
                    <el-table-column label="服务结果" prop="服务结果" width="100" />
                    <el-table-column label="实收金额" prop="实收金额" width="100" />
                    <el-table-column label="收款结果" prop="收款结果" width="100" />
                    <el-table-column label="收款备注" prop="收款备注" width="100" />
                    <el-table-column label="发货类型" prop="发货类型" width="100" />
                    <el-table-column label="快递公司" prop="快递公司" width="100" />
                    <el-table-column label="快递单号" prop="快递单号" width="100" />

                    <el-table-column label="发货备注" prop="发货备注" width="100" />
                    <el-table-column label="服务单状态" prop="服务单状态" width="100" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="handleInfo(row)">
                                详情
                            </el-button>
                            <el-button type="primary" link @click="handlezhenduan(row)">
                                诊断
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" :page-sizes="[100, 300, 500, 1000, 2000]" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
        <info ref="infoRef"></info>
        <zhenduan ref="zhenduanRef"></zhenduan>
    </div>
</template>

<script lang="ts" setup name="tbHxwtLists">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiTbHxwtLists, apiTbHxwtDelete } from '@/api/tb_hxwt'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)



import info from './info.vue'

const infoRef = shallowRef<InstanceType<typeof info>>()

import zhenduan from './zhenduan.vue'

const zhenduanRef = shallowRef<InstanceType<typeof zhenduan>>()
const handleInfo = (row: any) => {
    infoRef.value?.open(row)
}
const handlezhenduan = (row: any) => {

    zhenduanRef.value?.open(row)
}


// 查询条件
const queryParams = reactive({
    工单号: '',
    状态: '',
    工单类型: '',
    分配机构: '',
    分配人员: '',
    参与人员: '',
    业务标识: '',
    产品IMEI旧: '',
    序列号旧: '',
    产品品牌: '',
    产品型号: '',
    产品颜色: '',
    产品容量: '',
    保单号: '',
    密码: '',
    保修状态: '',
    报修服务类型: '',
    用户名称: '',
    手机号码: '',
    产品IMEI新: '',
    序列号新: '',
    产品品牌新: '',
    产品型号新: '',
    产品颜色新: '',
    产品容量新: '',
    旧机回收价格: '',
    更换时间: '',
    免赔价差: '',
    理赔额度: '',
    工单备注: '',
    服务结果: '',
    实收金额: '',
    收款结果: '',
    收款备注: '',
    发货类型: '',
    快递公司: '',
    快递单号: '',
    发货备注: '',
    服务单状态: ''
})

// 选中数据
const selectData = ref<any[]>([])

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id)
}

// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiTbHxwtLists,
    params: queryParams
})

// 添加
const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiTbHxwtDelete({ id })
    getLists()
}

getLists()
</script>
